<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
<meta charset="UTF-8">
<title>CodePen - Inbox UI design</title>

<link rel='stylesheet' href='css/tailwind.min.css'>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>

<div class="flex bg-indigo-800 antialiased min-h-screen">
  <aside class="flex sm:w-24 md:w-32 lg:w-56 xl:w-1/6 flex-col text-indigo-100 bg-indigo-900 bg-opacity-50">
     <button class="flex items-center justify-center flex-shrink-0 py-3 px-4 m-4 lg:m-8 text-lg font-semibold bg-indigo-800 hover:bg-indigo-700 rounded-lg">
   <svg viewBox="0 0 20 20" fill="currentColor" class="h-6 w-6 lg:-ml-1 lg:mr-2 text-indigo-300">
        <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
        <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
      </svg>
       <a href="Letters.html"> <span class="hidden lg:block">写邮件</span></a>
    </button>
    <nav class="text-sm md:text-base">
      <a href="#" class="flex flex-col items-center p-4 md:p-6 font-semibold hover:bg-indigo-900">
        <svg viewBox="0 0 20 20" fill="currentColor" class="h-10 w-10 text-indigo-300 mb-1">
          <path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd" />
        </svg>
        我的邮箱
      </a>
      <a href="#" class="flex flex-col items-center p-4 md:p-6 font-semibold hover:bg-indigo-900">
        <svg viewBox="0 0 20 20" fill="currentColor" class="h-8 w-8 text-indigo-300 mb-2 -mr-2 transform rotate-45">
          <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
        </svg>
        送出
      </a>
      <a href="#" class="flex flex-col items-center p-4 md:p-6 font-semibold hover:bg-indigo-900">
        <svg viewBox="0 0 20 20" fill="currentColor" class="h-10 w-10 text-indigo-300 mb-1">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
        收藏
      </a>
      <a href="#" class="flex flex-col items-center p-4 md:p-6 font-semibold hover:bg-indigo-900">
        <svg viewBox="0 0 20 20" fill="currentColor" class="h-8 w-8 text-indigo-300 mb-1">
          <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
        </svg>
        回收站
      </a>
    </nav>
    <div class="flex flex-col lg:flex-row items-center mt-auto bg-indigo-900">
      <div class="w-full md:w-auto md:flex-grow order-last lg:order-none">
        <a href="#" class="flex items-center px-4 py-3 hover:bg-indigo-800 hover:bg-opacity-25">
          <div class="h-10 w-10 mx-auto lg:ml-0 lg:mr-4 bg-indigo-800 bg-opacity-75 rounded-full overflow-hidden">
            <img src="img/pa.jpg" alt="my user avatar" class="object-cover">
          </div>
          <span id="qname" class="hidden lg:block">获取值失败</span>
        </a>
      </div>
      
    </div>
  </aside>
  <section class="w-full md:w-5/12 lg:w-2/6 p-4 md:p-8 text-indigo-100">
    <div class="relative">
      <svg viewBox="0 0 20 20" fill="currentColor" class="absolute h-6 w-6 text-indigo-300 mt-3 ml-3">
        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
      </svg>
      <input type="text" placeholder="搜索" class="w-full pl-12 pr-4 py-3 border-2 border-transparent placeholder-indigo-400 bg-indigo-900 bg-opacity-50 focus:bg-opacity-100 focus:border-indigo-500 focus:outline-none rounded-lg" />
    </div>
    <h2 class="ml-1 mt-6 mb-2 text-lg font-semibold ">收件箱</h2>


    <div id="vue">
    <div class="flex flex-col space-y-6 inbox con" v-for="fo in info" v-bind:id="fo.content" onclick="as(this.id)">
      <a class="relative flex pl-5 pr-3 py-6 hover:bg-indigo-900 active rounded-lg">
        <div class="flex-shrink-0 h-12 w-12 lg:h-20 lg:w-20 mr-4 bg-indigo-800 rounded-full overflow-hidden">
          <img src="img/pa.jpg" class="h-full w-full object-cover">
        </div>
        <div class="flex-grow mr-2">
          <header class="flex md:flex-col xl:flex-row justify-between mr-2 mb-2 leading-snug">
            <div>
              <h1 class="text-lg font-semibold">{{fo.fromName}}</h1>
              <h2 class="flex flex-wrap">
                <span class="text-indigo-400 mr-1">主题:</span>
                <span class="text-indigo-300">{{fo.headline}}</span>
              </h2>
            </div>
            <time class="flex flex-col items-end md:items-start xl:items-end text-xs xl:text-sm text-indigo-300">
              <span>{{fo.time}}</span>
            </time>
          </header>
        </div>
        <div>
          <button class="py-1 -mt-1 rounded-lg text-indigo-300 hover:text-indigo-100 hover:bg-indigo-800">
          </button>
        </div>
      </a>
    </div>
    </div>


  </section>
  <main class="hidden md:flex flex-col w-full md:w-7/12 lg:w-4/6 p-4 md:p-8 bg-gray-200">
    <div class="px-6 py-5 bg-white shadow rounded-lg mb-4 md:mb-8">
      <div class="flex mb-4">
        <div class="flex-shrink-0 h-8 w-8 lg:h-12 lg:w-12 mr-4 bg-gray-300 rounded-full overflow-hidden">
          <img src="img/pa.jpg" class="h-full w-full object-cover">
        </div>
        <div class="flex-grow mr-2">
          <header class="flex md:flex-col xl:flex-row justify-between mr-2 mb-2 leading-snug">
            <div>
              <h1 class="text-lg font-semibold">冷咖啡</h1>
              <h2 class="flex flex-wrap">
                <span class="text-gray-700 mr-1">主题:</span>
                <span class="text-gray-800">服务器开发</span>
              </h2>
            </div>
            <time class="flex flex-col items-end md:items-start xl:items-end text-xs xl:text-sm text-gray-700">
              <span>2021年8月11日</span>
              <span>5点17分</span>
            </time>
          </header>
        </div>
      </div>
      <div class="space-y-4">
        <p id="Article">服务器是计算机的一种，它比普通计算机运行更快、负载更高、价格更贵。
          服务器在网络中为其它客户机（如PC机、智能手机、ATM等终端甚至是火车系统等大型设备）提供计算或者应用服务。服务器具有高速的CPU运算能力、长时间的可靠运行、强大的I/O外部数据吞吐能力以及更好的扩展性。
          根据服务器所提供的服务，一般来说服务器都具备承担响应服务请求、承担服务、保障服务的能力。服务器作为电子设备，其内部的结构十分的复杂，但与普通的计算机内部结构相差不大，如：cpu、硬盘、内存，系统、系统总线等.
        </p>
      </div>
      </div>
    <div class="flex flex-wrap items-center -mb-4 pt-4 md:pt-8 mt-auto">
      <a href="#" class="inline-flex items-center px-12 py-4 mb-4 mr-6 bg-indigo-800 hover:bg-indigo-700 text-indigo-100 text-lg font-semibold rounded-lg">
        <svg viewBox="0 0 20 20" fill="currentColor" class="h-6 w-6 -ml-2 mr-3">
          <path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
        回复
      </a>
      <a href="#" class="inline-flex px-12 py-4 mb-4 bg-indigo-400 bg-opacity-25 hover:bg-indigo-300 hover:bg-opacity-25 text-indigo-800 text-lg font-semibold rounded-lg">
        <svg viewBox="0 0 20 20" fill="currentColor" class="h-6 w-6 -ml-2 mr-3 transform -scale-x-100">
          <path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
        设为收藏
      </a>
    </div>
  </main>
</div>

<script>
  $(function () {
    $.ajax({
      url:"/GetData.do",
      success:function (result) {
        document.getElementById("qname").innerText=result.qname;
      }
    });

    // $.ajax({
    //   url:"Article.do",
    //   success:function (result) {
    //     for(var i=0;i<result.length;i++){
    //       $.ajax({
    //         url:"datas/"+result[i]+".txt",
    //         success:function (results) {
    //           alert(results);
    //           document.getElementById("Article").innerText=results;
    //         }
    //       });
    //     }
    //   }
    //
    // });
  });

  new Vue({
    el:"#vue",
    data(){
      return{
        //属性格式需要与返回参数的格式一致（json）
        info:[
          {
            fromName:null,
            headline:null,
            time:null,
              content:null
          }
        ]

      }
    },
    mounted(){//钩子函数：可以在程序执行时（但未执行完）进行插队执行。采用链式编程，ES6的新特性
      //使用axios获取后台数据，并将获取的数据传给返回参数（info）
      axios.get('/Updates.do').then(response=>(this.info=response.data));
    }
  });

  function as(ve) {
    $.ajax({
      url:"datas/"+ve+".txt",
      success:function (result) {
        document.getElementById("Article").innerText=result;
      }
    });
  }

</script>
  
</body>
</html>
